import React from "react";
import { useParams } from "react-router-dom";
import { Card, Row, Col, Tag, Button, Table } from "antd";

const project = {
  id: "1",
  code: "FB1231231231231",
  type: "小程序开发",
  customer: "产品事业部",
  contract: "FH13123123123123",
  manager: "李舟",
  contact: "韩梅梅",
  viewers: "李雷雷，王某某",
  start: "2022.07.11 09:00",
  end: "2022.07.11 09:00",
  realStart: "2022.07.11 09:00",
  realEnd: "2022.07.11 09:00",
  days: 55,
  hours: 100,
  cost: 100000,
  remark: "嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻",
  deadline: "2022.07.11"
};

const phaseData = [
  { key: 1, status: "已完成", progress: "100%", name: "XXXXXX", manager: "李舟", planStart: "2022/06/01", planEnd: "2022/08/01 09:00", days: "55天", realStart: "2022/06/01", realEnd: "2022/08/01 09:00", hours: "80h" },
  { key: 2, status: "进行中", progress: "100%", name: "XXXXXX", manager: "李舟", planStart: "2022/06/01", planEnd: "2022/08/01 09:00", days: "55天", realStart: "2022/06/01", realEnd: "2022/08/01 09:00", hours: "80h" },
  { key: 3, status: "未开始", progress: "100%", name: "XXXXXX", manager: "李舟", planStart: "2022/06/01", planEnd: "2022/08/01 09:00", days: "55天", realStart: "2022/06/01", realEnd: "2022/08/01 09:00", hours: "80h" },
  { key: 4, status: "已暂停", progress: "100%", name: "XXXXXX", manager: "李舟", planStart: "2022/06/01", planEnd: "2022/08/01 09:00", days: "55天", realStart: "2022/06/01", realEnd: "2022/08/01 09:00", hours: "80h" }
];

const taskData = [
  { key: 1, name: "任务名称", plan: 800, real: 800, cost: "￥10000", progress: "100%", status: "已完成", start: "2022/06/01" },
  { key: 2, name: "测试任务", plan: 800, real: 800, cost: "￥10000", progress: "100%", status: "进行中", start: "2022/06/01" },
  { key: 3, name: "输出UI设计稿", plan: 800, real: 800, cost: "￥10000", progress: "100%", status: "未开始", start: "2022/06/01" }
];

export default function ProjectDetail() {
  const { id } = useParams();
  return (
    <div style={{ background: "#f5f5f5", padding: 16 }}>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 8 }}>项目详情</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
          <div>
            <Tag color="#f5a623">内控项目</Tag>
            <Tag color="#1890ff">进行中</Tag>
            <Tag color="#1890ff">筹措中</Tag>
          </div>
          <div>
            <Tag color="#f5222d">非常紧急</Tag>
            <span style={{ color: "#1890ff", marginLeft: 8 }}>CRM系统</span>
          </div>
        </div>
        <Row gutter={16} style={{ marginBottom: 8 }}>
          <Col span={8}>
            <div>项目编号：{project.code}</div>
            <div>项目分类：{project.type}</div>
            <div>关联客户：{project.customer}</div>
            <div>关联合同：{project.contract}</div>
            <div>负责人：{project.manager}</div>
            <div>项目对接人：{project.contact}</div>
          </Col>
          <Col span={8}>
            <div>项目查看人：{project.viewers}</div>
            <div>项目开始时间：{project.start}</div>
            <div>项目完成时间：{project.end}</div>
            <div>项目工期天数：{project.days}</div>
            <div>项目工时数：{project.hours}h</div>
            <div>项目备注：{project.remark}</div>
          </Col>
          <Col span={8}>
            <div>实际开始时间：{project.realStart}</div>
            <div>实际完成时间：{project.realEnd}</div>
            <div>实际工期天数：{project.days}</div>
            <div>实际工时数：{project.hours}h</div>
            <div>项目成本：￥{project.cost}</div>
            <div>售后到期时间：{project.deadline}</div>
          </Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 8 }}>
          <Col span={6}>
            <Card bordered={false} style={{ textAlign: "center" }}>
              <div>项目进度</div>
              <div style={{ fontSize: 24, fontWeight: 600 }}>0.00%</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false} style={{ textAlign: "center" }}>
              <div>任务数量</div>
              <div style={{ fontSize: 24, fontWeight: 600 }}>0</div>
              <div>完成：0</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false} style={{ textAlign: "center" }}>
              <div>逾期任务</div>
              <div style={{ fontSize: 24, fontWeight: 600 }}>0</div>
              <div>请及时完成任务</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card bordered={false} style={{ textAlign: "center" }}>
              <div>延误率</div>
              <div style={{ fontSize: 24, fontWeight: 600 }}>0%</div>
              <div>延误任务数量：0</div>
            </Card>
          </Col>
        </Row>
      </Card>
      <Card style={{ marginBottom: 16 }}>
        <Row gutter={16}>
          {/* 左侧：项目阶段 */}
          <Col span={12}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
              <div style={{ fontWeight: 600, fontSize: 16 }}>项目阶段</div>
              <a href="#" style={{ color: "#1890ff" }}>查看详情</a>
            </div>
            <Table
              dataSource={phaseData}
              columns={[
                { title: "ID", dataIndex: "key", key: "key", width: 40 },
                { title: "状态", dataIndex: "status", key: "status", width: 60 },
                { title: "进度", dataIndex: "progress", key: "progress", width: 60 },
                { title: "关联项目阶段", dataIndex: "name", key: "name", width: 100 },
                { title: "阶段名称", dataIndex: "name", key: "phaseName", width: 100, render: () => "阶段配置器" },
                { title: "负责人", dataIndex: "manager", key: "manager", width: 60 },
                { title: "阶段开始时间", dataIndex: "planStart", key: "planStart", width: 100 },
                { title: "阶段完成时间", dataIndex: "planEnd", key: "planEnd", width: 100 },
                { title: "工期天数", dataIndex: "days", key: "days", width: 80 },
                { title: "工时数", dataIndex: "hours", key: "hours", width: 80 },
              ]}
              pagination={false}
              size="small"
              scroll={{ x: 900 }}
            />
          </Col>
          {/* 右侧：阶段任务 */}
          <Col span={12}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
              <div style={{ fontWeight: 600, fontSize: 16 }}>阶段任务</div>
              <a href="#" style={{ color: "#1890ff" }}>查看详情</a>
            </div>
            <Table
              dataSource={taskData}
              columns={[
                { title: "ID", dataIndex: "key", key: "key", width: 40 },
                { title: "任务名称", dataIndex: "name", key: "name", width: 100 },
                { title: "计划工时", dataIndex: "plan", key: "plan", width: 80 },
                { title: "实际工时", dataIndex: "real", key: "real", width: 80, render: (text, record) => <span style={{ color: "#f5222d" }}>{record.real}</span> },
                { title: "阶段成本", dataIndex: "cost", key: "cost", width: 100, render: (text) => <span style={{ color: "#f5222d" }}>{text}</span> },
                { title: "进度", dataIndex: "progress", key: "progress", width: 60 },
                { title: "状态", dataIndex: "status", key: "status", width: 60, render: (text) => {
                  let color = "#1890ff";
                  if (text === "已完成") color = "#52c41a";
                  if (text === "进行中") color = "#faad14";
                  if (text === "未开始") color = "#bfbfbf";
                  return <span style={{ color }}>{text}</span>;
                }},
                { title: "开始时间", dataIndex: "start", key: "start", width: 100 }
              ]}
              pagination={false}
              size="small"
              scroll={{ x: 700 }}
            />
          </Col>
        </Row>
      </Card>
    </div>
  );
}